<template>
	<view>
		<!-- begin 轮播图 by cmh -->
		<view class="banner">
			<u-swiper :list="slideImgs" height="360rpx" :indicator="true" radius="20rpx"></u-swiper>
		</view>
		<view class="cate">
			<view class="item" v-for="(item,index) in cateList" :key="index">
				<u--image :showLoading="true" :src="item.img" width="110rpx" height="110rpx"
					@click="jumpPage(item.url)"></u--image>
				<view class="name">{{item.name}}</view>
			</view>
		</view>
		<view class="huodong">
			<u--image :showLoading="true" src="https://cdn.zhidiaotianxia.com//def/b0c05202412231657158222.jpg"
				height="144rpx" width="334rpx" radius="12rpx"
				@click="jumpPage('/pages/activity/goods_seckill/index')"></u--image>
			<u--image :showLoading="true" src="https://cdn.zhidiaotianxia.com//def/856a4202412231657169744.jpg"
				height="144rpx" width="334rpx" radius="12rpx"
				@click="jumpPage('/pages/activity/rank/index')"></u--image>
		</view>
		<!-- begin 水平滚动tab栏 -->
		<view class="navList">
			<u-tabs :list="headerTabs" @click="clickTab" :activeStyle="{color:'#333',fontSize:'28rpx'}"
				keyName="cate_name" :inactiveStyle="{color:'#9f9f9f',fontSize:'28rpx'}"></u-tabs>
		</view>
		<!-- end 水平滚动tab栏 -->
		<!-- begin 商品列表 -->
		<view class="goodlist" v-if="goodList.length">
			<goodLi :goodList="goodList"></goodLi>
			<u-loadmore :status="status" fontSize="24rpx" />
		</view>
		<view class='noCommodity' v-if="!goodList.length">
			<view class='pictrue'>
				<image :src="`${domain}/static/images/noCoupon.png`"></image>
				<view>暂无内容</view>
			</view>
		</view>
		<!-- end 商品列表 -->
		<home></home>
	</view>
</template>
<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------

	// begin 顶部状态栏 
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	// end 顶部状态栏 

	import {
		HTTP_REQUEST_URL
	} from '@/config/app';

	// begin 轮播图 by cmh
	import {
		getHotBanner
	} from '@/api/store.js';
	// end 轮播图 by cmh

	// begin 商品列表
	import {
		getCategoryList
	} from '@/api/store.js';
	import {
		getProductHot,
		getProductslist
	} from '@/api/store.js';
	import {
		goShopDetail
	} from '@/libs/order.js';
	// end 商品列表
	import goodLi from '@/components/good-item/index.vue'
	import home from '@/components/home/index.vue'
	export default {
		components: {
			goodLi,
			home
		},
		data() {
			return {
				domain: HTTP_REQUEST_URL,
				// begin 顶部状态栏
				sysHeight: sysHeight,
				// end 顶部状态栏

				// begin 水平滚动tab栏
				curTab: 0, // 当前选择
				headerTabs: [{
					cate_name: "推荐",
					store_category_id: 0
				}],
				scrollLeft: 0, // 初始滚动条位置
				// end 水平滚动tab栏
				// begin 轮播图 by cmh
				slideImgs: [],

				// end 轮播图 by cmh
				// begin 商品列表
				where: {
					order: '',
					keyword: '',
					page: 1,
					limit: 10
				},
				goodList: [], // end 商品列表
				cateList: [{
						"name": "预售产品",
						"url": "/pages/activity/presell/index",
						"img": "https://crmeb-test.zhidiaotianxia.com/uploads/def/20250103/f572f001248ee0145ebb7ddb39d56b0a.png"
					},
					{
						"name": "我要拼团",
						"url": "/pages/activity/combination/index",
						"img": "https://crmeb-test.zhidiaotianxia.com/uploads/def/20250103/58ed5740d8e013c3d4c3bdd2504466a9.png"
					},
					{
						"name": "领券中心",
						"url": "/pages/users/user_get_coupon/index",
						"img": "https://crmeb-test.zhidiaotianxia.com/uploads/def/20250103/c9851f0832323a0e5c377146b6810cf8.png"
					},
					{
						"name": "积分商城",
						"url": "/pages/points_mall/index",
						"img": "https://crmeb-test.zhidiaotianxia.com/uploads/def/20250103/9e9ec367341d5df4bac52ff203cf60cd.png"
					}
				],
				status: "loadmore",
				currentLimit: 0 //



			};
		},
		computed: {
			fixHeader1() {
				return `height: ${sysHeight}px; top: 0px`;
			},
			fixHeader2() {
				return `top: ${sysHeight}px; height: 41px`;
			},
			fixHeader3() {
				return `top: ${sysHeight+41}px`;
			}
		},

		onLoad(options) {
			// begin 轮播图 by cmh
			// 数据在 后台/维护/开发配置/组合数据，以_home_banner结尾的
			// 这里查的是good_home_banner，

			console.log("getHotBanner ...");
			getHotBanner("good").then(res => {
				console.log("getHotBanner:", res);
				if (res.data.length != 0) {
					this.slideImgs = res.data.map((item) => {
						let url = item.pic;
						return url;
					});
				}

			}).catch(res => {
				console.log(res);
			});
			// end 轮播图 by cmh

			getCategoryList().then(res => {
				if (res.data.list && res.data.list.length > 0) {
					let list = res.data.list.filter(item => item.store_category_id == 338);
					list = list[0].children.filter(item => item.store_category_id == 334);
					this.headerTabs = [{
						cate_name: "推荐",
						store_category_id: 0
					}].concat(list[0].children);
				}
			})
			this.getGoods();
		},
		created(options) {

		},
		onShow() {

		},
		onHide() {

		},
		onReady() {

		},
		watch: {

		},
		onPullDownRefresh() {
			this.curTab = 0;
			this.goodList = [];
			this.where.page = 1;
			this.currentLimit = 0;
			this.getGoods();
		},
		onReachBottom() {
			if (this.currentLimit >= 10) {
				this.status = 'loading';
				this.where.page++;
				this.getGoods();
			} else {
				this.status = 'nomore';
			}

		},
		methods: {
			clickTab(item) {
				console.log(22, item);
				this.curTab = item.index;
				this.goodList = [];
				this.where.page = 1;
				if (this.curTab != 0) {
					this.where.cate_pid = item.store_category_id;
				}
				this.getGoods();
			},

			// begin 商品列表
			getGoods() {
				let that = this;
				if (this.curTab == 0) {
					console.log(112);
					getProductHot(that.where.page, that.where.limit).then(res => {
						console.log(res);
						uni.stopPullDownRefresh();
						that.goodList = [...that.goodList, ...res.data.list];
						that.currentLimit = res.data.list.length;
						if (res.data.list.length == 0) {
							that.status = 'nomore';
						}

					}).catch(err => {

					});
				} else {
					getProductslist(that.where).then(res => {
						uni.stopPullDownRefresh();
						that.goodList = [...that.goodList, ...res.data.list];
						that.currentLimit = res.data.list.length;
						if (res.data.list.length == 0) {
							that.status = 'nomore';
						}

					}).catch(err => {

					});
				}
			},
			jumpPage(url) {
				uni.navigateTo({
					url: url
				});
			},


		}
	};
</script>

<style lang="scss" scoped>
	.fix-header {
		position: sticky;
		background-color: white;
		z-index: 1;
	}

	.header-search {
		width: 530rpx;
		height: 80rpx;
		// position: relative;
		z-index: 1;
		padding: 10rpx 20rpx 20rpx 20rpx;

		.search {
			flex: 1;
			display: flex;
			align-items: center;
			min-width: 0;
			height: 58rpx;
			border-radius: 29rpx;
			margin-left: 32rpx;
			background-color: #FFFFFF;
			font-weight: 500;
			font-size: 26rpx;
			color: #999999;

			.iconfont {
				margin-right: 13rpx;
				margin-left: 30rpx;
				font-size: 24rpx;
			}
		}
	}

	// begin 水平滚动tab栏
	.header-tab {
		width: 100vw;
		// position: relative;
		border-bottom: solid 1px #f6f6f6;
		display: flex;
		justify-content: flex-start;
		white-space: nowrap;
		box-sizing: border-box;
		padding: 0rpx 20rpx 10rpx 20rpx;
		margin-top: 10rpx;

		z-index: 1;

		.tab-item {
			display: inline-block;
			padding: 20rpx 20rpx;
		}

		.tab-item.cur-tab {
			font-weight: bolder;
			color: #3c9cff;
			border-bottom: 4rpx solid #3c9cff;
		}

		.search {
			flex: 1;
			display: flex;
			align-items: center;
			min-width: 0;
			height: 58rpx;
			border-radius: 29rpx;
			margin-left: 32rpx;
			background-color: #FFFFFF;
			font-weight: 500;
			font-size: 26rpx;
			color: #999999;

			.iconfont {
				margin-right: 13rpx;
				margin-left: 30rpx;
				font-size: 24rpx;
			}
		}
	}

	// end 水平滚动tab栏

	// begin 轮播图 by cmh
	$swiperHeight: 380rpx;

	.swiper {
		background-color: rgb(239, 251, 255);
		// position: relative;
		// top: 98px;
		width: 100%;
		/* #ifdef MP  */
		height: auto;
		/* #endif */
		/* #ifdef H5 || APP-PLUS */
		height: $swiperHeight;
		/* #endif */

		margin: 0 auto;
		border-radius: 10rpx;
		overflow-x: hidden;
		/* #ifdef MP */
		z-index: 0;

		/* #endif */
		swiper,
		.swiper-item,
		image {
			width: 100%;
			height: 280rpx;
			border-radius: 10rpx;
		}

		.slide-navigator {}

		image {
			transform: scale(0.93);
			transition: all 0.6s ease;
		}

		swiper-item.active {
			image {
				transform: scale(1);
			}
		}
	}

	// end 轮播图 by cmh

	.empty-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 200rpx;

		image {
			width: 414rpx;
			height: 240rpx;
		}

		.txt {
			font-size: 26rpx;
			color: #999;
		}
	}

	.cate {
		padding-left: 30rpx;
		padding-right: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 40rpx;

		.item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.name {
				color: #333;
				margin-top: 10rpx;
				font-size: 24rpx;
			}
		}
	}

	.huodong {
		margin-top: 40rpx;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.banner {
		width: 690rpx;
		margin-left: 30rpx;
		margin-top: 100rpx;
	}
	.navList{
		margin-left: 30rpx;
		margin-right: 30rpx;
	}
</style>